import * as React from 'react';
import { forwardRef } from 'react';
import StatusBar from '../status-bar/status-bar';
import TitleHeader from '../title-header/title-header';
import BarChart from '../bar-chart/bar-chart';
import TextNumber from '../text-number/text-number';
import './index.scss';

export interface CityStationOperationStatusProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 状态栏配置
   */
  statusBar?: {
    chineseText?: string;
    englishText?: string;
    theme?: 'light' | 'dark';
  };
  /**
   * 统计数据配置
   */
  textNumbers?: {
    progressCount?: string;
    exitCount?: string;
    remainingCount?: string;
    textSize?: number;
    numberSize?: number;
    textColor?: string;
    numberColor?: string;
  };
  /**
   * 标题配置
   */
  titleHeader?: {
    title?: string;
  };
  /**
   * 柱状图配置
   */
  barChart?: {
    title?: string;
    xAxisData?: string[];
    series?: Array<{
      name: string;
      data: Array<{
        name: string;
        value: number;
      }>;
      color?: string;
    }>;
    width?: number;
    height?: number;
    theme?: 'light' | 'dark';
  };
  __designMode?: boolean;
}

const CityStationOperationStatus = forwardRef<HTMLDivElement, CityStationOperationStatusProps>(({
  className = '',
  style = {},
  width,
  height,
  noResponsiveScale = true,
  statusBar = {},
  textNumbers = {},
  titleHeader = {},
  barChart = {},
  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `city-station-operation-status ${className}`.trim();
  const customStyle: React.CSSProperties = { ...style };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');

  return (
    <div 
      ref={ref} 
      className={finalClassName} 
      style={customStyle} 
      {...otherProps}
    >
      <StatusBar
        chineseText={statusBar.chineseText || "运营现状"}
        englishText={statusBar.englishText || "Operation Status"}
        theme={statusBar.theme || "dark"}
        noResponsiveScale={noResponsiveScale}
      />
      <div className="city-station-operation-status-content">
        <div className="text-number-container">
          <TextNumber
            text="累计进展人数"
            number={textNumbers.progressCount || "103561"}
            direction="vertical"
            align="center"
            textColor={textNumbers.textColor || "#FFFFFF"}
            numberColor={textNumbers.numberColor || "#00FFFF"}
            textSize={textNumbers.textSize || 16}
            numberSize={textNumbers.numberSize || 24}
            noResponsiveScale={noResponsiveScale}
          />
          <TextNumber
            text="累计出站人数"
            number={textNumbers.exitCount || "118755"}
            direction="vertical"
            align="center"
            textColor={textNumbers.textColor || "#FFFFFF"}
            numberColor={textNumbers.numberColor || "#00FFFF"}
            textSize={textNumbers.textSize || 16}
            numberSize={textNumbers.numberSize || 24}
            noResponsiveScale={noResponsiveScale}
          />
          <TextNumber
            text="剩余发送人数"
            number={textNumbers.remainingCount || "73965"}
            direction="vertical"
            align="center"
            textColor={textNumbers.textColor || "#FFFFFF"}
            numberColor={textNumbers.numberColor || "#00FFFF"}
            textSize={textNumbers.textSize || 16}
            numberSize={textNumbers.numberSize || 24}
            noResponsiveScale={noResponsiveScale}
          />
        </div>
        <TitleHeader
          title={"小时运力图"}
          noResponsiveScale={noResponsiveScale}
        />
        <BarChart
          style={{
            marginLeft: '25px'
          }}
          title={barChart.title || "24小时人流统计"}
          xAxisData={barChart.xAxisData || Array.from({ length: 24 }, (_, i) => `${i}-${i + 1}点`)}
          series={barChart.series || [
            {
              name: '进站人数',
              data: Array.from({ length: 24 }, (_, i) => ({
                name: `${i}-${i + 1}点`,
                value: Math.floor(Math.random() * 1000) + 500
              }))
            },
            {
              name: '出站人数',
              data: Array.from({ length: 24 }, (_, i) => ({
                name: `${i}-${i + 1}点`,
                value: Math.floor(Math.random() * 800) + 400
              }))
            }
          ]}
          width={barChart.width || 400}
          height={barChart.height || 200}
          theme={barChart.theme || 'dark'}
          noResponsiveScale={noResponsiveScale}
        />
      </div>  
    </div>
  );
});

CityStationOperationStatus.displayName = 'CityStationOperationStatus';

export default CityStationOperationStatus;
